<template>
  <div id="zoom_template">
    <i class="el-icon-zoom-in" @click="zoomClick"></i>
    <div
      class="zoom_message flex-x-y-center"
      v-if="zoomVisiable"
      @click="zoomClick"
    >
      <div class="flex-x-y-center box">
        <div class="content">
          <div class="title">31楼</div>
          <ul>
            <li v-for="info in listAdd" :style="`${error.includes(info.name)?'background-color:red':''}`">
              <div class="zoom_left">{{ info.name }}:</div>
              <div class="zoom_right">{{ info.num }}份</div>
            </li>
          </ul>
        </div>
        <div class="content">
          <div class="title">30楼</div>
          <ul>
            <li v-for="info in listLeft" :style="`${error.includes(info.name)?'background-color:red':''}`">
              <div class="zoom_left">{{ info.name }}:</div>
              <div class="zoom_right">{{ info.num }}份</div>
            </li>
          </ul>
        </div>
        <div class="content">
          <div class="title">29楼</div>
          <ul>
            <li v-for="info in listRight" :style="`${error.includes(info.name)?'background-color:red':''}`">
              <div class="zoom_left">{{ info.name }}:</div>
              <div class="zoom_right">{{ info.num }}份</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Zoom",
  props: {
    total: {
      type: String,
    },
    orderObj: {
      type: Object,
    },
    error: {
      type: Array,
    },
  },
  data() {
    return {
      zoomVisiable: false,
      listLeft: [],
      listRight: [],
      listAdd:[]
    };
  },
  methods: {
    zoomClick() {
      this.zoomVisiable = !this.zoomVisiable;
    },
    getName(info, index) {
      if (index == 0) {
        let key = info.split("*")[index];
        return key.substr(0, key.length - 2);
      } else {
        return info.split("*")[index];
      }
    },
    sortId(a, b) {
      return a.order - b.order;
    },
    getOrderArr(arr, str) {
      let orderArr = [];
      arr.forEach((item) => {
        let name = item.split(str)[0];
        orderArr.push({
          name: name,
          num: item.split(str)[1],
          order: this.orderObj[name],
        });
      });
      orderArr.sort(this.sortId);
      return orderArr;
    },
  },
  created() {
    let list = this.total.split("、");
    let add = list.filter((item) => {
      return item.split("*")[0].substr(-2) == 31;
    });
    this.listAdd = this.getOrderArr(add,"31*");
    let left = list.filter((item) => {
      return item.split("*")[0].substr(-2) == 30;
    });
    this.listLeft = this.getOrderArr(left,"30*");
    let right = list.filter((item) => {
      return item.split("*")[0].substr(-2) == 29;
    });
    this.listRight = this.getOrderArr(right,"29*")
  },
};
</script>
<style lang="stylus">
#zoom_template {
  display: inline;

  .el-icon-zoom-in {
    margin-left: 10px;
    cursor: pointer;
  }

  .zoom_message {
    min-width: 900px;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;

    .box {
      align-items: start;
      height: 90%;
    }

    // align-items flex-start
    .content {
      min-width: 400px;
      max-height: 100%;
      background-color: white;
      padding: 20px 20px 20px 0;
      border-radius: 10px;
      overflow: auto;
      margin: 10px;

      // margin-top 100px;
      .title {
        text-align: center;
        font-size: 30px;
      }

      ul {
        li {
          list-style: none;
          color: black;
          display: flex;
          height: 40px;
          line-height: 40px;
          font-size: 30px;

          .zoom_left {
            flex: 1;
            text-align: right;
          }

          .zoom_right {
            flex-basis: 80px;
            margin-left: 5px;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>